<template>
    <div>
        <div>
            <van-search style="font-size: 18px" shape="round" v-model="keyword" placeholder="请输入城市名(如北京、bj、beijing)"/>
            <div class="search-content" v-show="this.list.length">
                <ul>
                    <li class="search-item" v-for="item of this.list" :key="item.id" @click="handleItemClick(item.name)">{{item.name}}</li>
                </ul>
            </div>
        </div>
        <div class="current-city">
            <div class="current-city-tag">当前城市</div>
            <van-field class="current-city-input" v-model="this.$store.state.city" readonly/>
        </div>
        <div class="hotCity-tag">
            <div class="hot-title">热门城市</div>
            <van-tag plain type="primary" v-for="item of hotCities" @click="handleCity(item)" :key="item.id">
                {{item.name}}
            </van-tag>
        </div>
        <div class="all-cities">
            <van-index-bar>
                <div v-for="(item,key) of cities" :key="key" :ref="key">
                    <van-index-anchor :index= key />
                    <van-cell v-for="innerItem of item" :key="innerItem.id" :title=innerItem.name />
                </div>
            </van-index-bar>
        </div>

    </div>
</template>

<script>
    import {disreslove} from "../../../public/mock/utils";
    import {Toast} from 'vant'
    export default {
        name: "CityHeader",
        props: {
            alphabetList: Array,
            cities: Object,
            hotCities: Array
        },
        data() {
            return {
                content: '',
                name: '',
                selectName: '',
                keyword:'',
                list:[],
                show:'请输入城市名(如北京、bj、beijing)',
                iLetter:'',
                iWord:''
            };
        },
        watch:{
            keyword(){
                let content = this.keyword.trim()
                if (content === ''){
                   this.list.length = null
                }else if (/^[0-9]+$/.test(content)){
                    Toast({
                        message:'找不到该城市',
                        position: 'top',
                    })
                }else if (/^[a-zA-Z]+$/.test(content)){
                    this.searchAlph(content)
                }else if (/^[\u4e00-\u9fa5]+$/.test(content)){
                    // 新建一个数组存放临时变量
                    let result = []
                    for (let i in this.cities){
                        // 判断首字母是否存在 然后决定循环
                        let haveAlph = i.toLowerCase().indexOf(disreslove(content.substr(0,1)).substr(0,1))>-1
                        if (haveAlph){
                            this.cities[i].forEach((value)=>{
                                if (value.name.indexOf(content)>-1){
                                    this.show="请输入城市名（如北京、bj、beijing）"
                                    result.push(value)
                                    this.list = result
                                }else if (content.indexOf(value.name)>-1){
                                    this.show = "找不到结果"+this.keyword
                                }else{
                                    this.loopWord(content)
                                    if (!(this.iWord.indexOf(
                                        content.substr(content.length-1,1))>-1)){
                                        this.show = "找不到信息"+this.keyword
                                        this.iWord = ''
                                    }
                                }
                            })
                        }
                    }
                }else {
                    this.showError()
                }
            }
        },
        methods:{
            handleItemClick(city){
                this.$store.dispatch('change',city)
                this.$router.push('/')
            },
            showError(){
                this.list = ['']
                this.show = "找不到结果"+this.keyword
            },
            handleCity(item){
                let city = item.name;
                this.$store.state.city = city;
            },
            loopWord(content){
                const citiesWrapper = this.cities
                for (let i in citiesWrapper){
                    if (i.toLowerCase().indexOf(disreslove(content.substr(0,1)).substr(0,1))>-1){
                        let arr=[]
                        citiesWrapper[i].forEach((value)=>{
                            arr.push(value.name.substr(content.length-1,1))
                            let a = [...new Set(arr)]
                            this.iWord = a.toString()
                        })
                    }
                }
            },
            searchAlph(content){
                // 把输入的字母统一转换为小写字母
                const lowerContent = content.toLowerCase()
                // 新建一个数组存放临时变量
                let result = []
                for (let i in this.cities){
                    // 判断首字母是否存在 然后决定循环
                    let haveAlph = i.toLowerCase().indexOf(lowerContent.substr(0,1))>-1
                    if (haveAlph){
                        this.cities[i].forEach((value)=>{
                            if (value.spell.indexOf(lowerContent)>-1){
                                result.push(value)
                                this.list = result
                            }else if (lowerContent.indexOf(value.spell)>-1){
                                this.show = "找不到结果"+this.keyword
                            }else{
                                this.loopAlphabet(lowerContent)
                                if (!(this.iLetter.indexOf(
                                    lowerContent.substr(lowerContent.length-1,1))>-1)){
                                    this.show = "找不到信息"+this.keyword
                                    this.iLetter = ''
                                }
                            }
                        })
                    }else if (lowerContent.substr(0,1)==='u'||lowerContent.substr(0,1)==='i'
                        ||lowerContent.substr(0,1)==='v'||lowerContent.substr(0,1)==='o'){
                        this.show = "找不到信息"+this.keyword
                        this.list = ['1']
                    }
                }
            },
            loopAlphabet(lowerContent){
                const citiesWrapper = this.cities
                for (let i in citiesWrapper){
                    if (i.toLowerCase().indexOf(lowerContent.substr(0,1))>-1){
                        let arr=[]
                        citiesWrapper[i].forEach((value)=>{
                            arr.push(value.spell.substr(lowerContent.length-1,1))
                            let a = [...new Set(arr)]
                            this.iLetter = a.toString()
                        })
                    }
                }
            },
        },
        mounted() {
            // this.scroll = new BScroll(this.$refs.contentWrapper,{
            //     click: true,
            //     mouseWheel:{
            //         speed: 20,
            //         invert: false,
            //         easeTime: 300
            //     }
            // })
        }
    }
</script>

<style scoped>
.van-search__content ::-webkit-input-placeholder{
    color: #aaaaaa;
}
.van-tag--primary.van-tag--plain{
    margin-left: .2rem;
}
.van-index-bar >>> .van-index-bar__sidebar {
    top: 40%;
}
.van-index-bar >>> .van-index-bar__index {
    font-size: 16px;
    line-height: 20px;
}
.van-index-bar >>> .van-index-bar__index--active, .van-index-bar >>> .van-index-anchor--sticky{
    color: #1989fa;
}
.van-cell >>> .van-cell__value--alone{
    font-size: 16px;
}

.hotCity-tag, .van-tag{
    font-size: 16px;
    padding: .15rem .3rem;
    margin: auto .3rem;
    text-align: center;
    float: left;
    margin-bottom: .2rem;
}
.hotCity-tag{
    border-bottom: .2rem #e2e3e5 solid;
    /*border: 1px solid black;*/
}
.all-cities{
    margin-top: .01rem;
}
.hot-title{
    padding: .2rem;
    text-align: left;
    font-size: 16px;
    margin-top: -.2rem;
    margin-left: -.3rem;
}
.current-city{
    padding: .1rem;
}
.current-city-tag{
    font-size: 16px;
    padding: .2rem;
}
.current-city-input{
    width: 94%;
    margin-left: 2%;
}
.search-content {
    overflow:hidden;
    position:absolute;
    z-index:101;
    top:1.1rem;
    left:0;
    right:0;
    bottom:0;
    background:#eee;
}
.search-first{
    line-height:.22rem;
    padding:.1rem;
    margin-bottom:.06rem;
    color:#666;
    background:#fff;
    font-size:.1rem;
    color:#aaa;
}
.search-item{
    line-height:.82rem;
    padding-left:.2rem;
    margin-bottom:.06rem;
    color:#666;
    background:#fff;
}
</style>